<template>
    <el-dialog id="nav-msg" :visible.sync="showMsgList" @click.native.stop>
        <div slot="title">消息
            <!-- <div class="btn-read" @click="setRead">
                <span class="iconfont icon-xuanzhong"></span>全部标为已读
            </div> -->
            <div class="btn-read">
                <span class="iconfont icon-xuanzhong"></span>全部标为已读
            </div>
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="任务" name="1">
                <el-table :data="renwuData" ref="listData">
                    <el-table-column label="任务名称" prop="taskName"   width="" ></el-table-column>
                    <el-table-column label="任务类型" prop="taskTypeName"   align="center"  width=""></el-table-column>
                    <el-table-column label="任务描述" prop="taskDetail"  align="center"   width=""></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="通知公告" name="2">
                <el-table :data="tongZhi" ref="listData">
                    <el-table-column label="标题" width="" >
                        <template slot-scope="scope">
                            <span :title="scope.row.title">{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容" align="center"  width="">
                        <template slot-scope="scope">
                            <span :title="scope.row.content">{{scope.row.content}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="行业动态" name="3">
                <el-table :data="hangYe" ref="listData">
                    <el-table-column label="标题" width="" >
                        <template slot-scope="scope">
                            <span :title="scope.row.title">{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容" align="center"  width="">
                        <template slot-scope="scope">
                            <span :title="scope.row.content">{{scope.row.content}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="河长新闻" name="4">
                <el-table :data="hezhangNews" ref="listData">
                    <el-table-column label="标题" width="" >
                        <template slot-scope="scope">
                            <span :title="scope.row.title">{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容" align="center"  width="">
                        <template slot-scope="scope">
                            <span :title="scope.row.content">{{scope.row.content}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="问题曝光" name="5">
                <el-table :data="wenTi" ref="listData">
                    <el-table-column label="标题" width="" >
                        <template slot-scope="scope">
                            <span :title="scope.row.title">{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容" align="center"  width="">
                        <template slot-scope="scope">
                            <span :title="scope.row.content">{{scope.row.content}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- <el-tabs v-model="curTab"  @tab-click="onTabClick">
            <el-tab-pane v-for="tab in tabList" :label="tab.val" :name="tab.id" :key="tab.id">
                <ul @click="viewMsg($event)">
                    <li class="msg-item" v-for="(item,index) in tab.data" :key="index" >
                        <i class="iconfont icon-dian1" v-if="item.readStatus=='1'"></i>
                        <span class="title" :title="item.title">{{item.title}}</span>
                        <span class="createDate">{{item ? item.createDate :''}}</span>
                    </li>
                </ul>
            </el-tab-pane>
        </el-tabs> -->
    </el-dialog>
</template>
<script>
export default {
    data(){
        return{
            renwuData:[],
            tongZhi:[],
            hangYe:[],
            hezhangNews:[],
            wenTi:[],
            activeName: '1',
            showMsgList:false,
            curTab:'000',
            getTab:false,
            tabList:[
                {
                    id:'000',
                    val:'任务',
                    data:[{id:0,title:''}]
                }
            ],
            startTime:'',
            endTime:'',
        }
    },
    watch:{
        showMsgList(newVal){
            if(newVal && !this.getTab){
                this.initDate()
                this.getTabs()
                this.getTaskData()
            }
        }
    },
    mounted(){
        this.newsTaskNoRead()
        this.newsInformationNoRead()
    },
    methods:{
        newsInformationNoRead(){//未读公告
            let _this = this
            this.$http.newsInformationNoRead('ab4bf1de00934e5e9cd1ef7e84dba52d').then(res=>{//通知公告
                // console.log(res)
                _this.tongZhi = res.data.data.records
            }).catch(err=>{
                console.log(err)
            })
            this.$http.newsInformationNoRead('59b17e2f05cb4ae29efd6c034e9706d1').then(res=>{//行业动态
                // console.log(res)
                _this.hangYe = res.data.data.records
            }).catch(err=>{
                console.log(err)
            })
            this.$http.newsInformationNoRead('2cac1c3807b54791acabb56faad9686b').then(res=>{//河长新闻
                // console.log(res)
                _this.hezhangNews = res.data.data.records
            }).catch(err=>{
                console.log(err)
            })
            this.$http.newsInformationNoRead('44587e1e526f428596a54bd09a8892fa').then(res=>{//问题曝光
                // console.log(res)
                _this.wenTi = res.data.data.records
            }).catch(err=>{
                console.log(err)
            })
        },
        newsTaskNoRead(){//未读任务
            let _this = this
            this.$http.newsTaskNoRead().then(res=>{
                _this.renwuData=res.data.data.records
            }).catch(err=>{
                console.log(err)
            })
        },
        onTabClick(tab){
            this.curTab=tab.name
            var hasData=this.tabList.some((item)=>{
                if(item.id===tab.name && item.data){
                    return true
                }
            })
            
            //请求数据--最近两周--标记已读未读
            if(this.curTab!=='000' && !hasData){
                this.getNoticeData(tab.name)
            }

        },
        getTaskData(pageNum){
            var submitData={
                taskDirection:"receive",
                current:1,
                size:9999999,
                startTime:this.startTime,
                endTime:this.endTime,
            };
            this.$http.getTaskList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){return}
                var newData=data.records.map((item)=>{
                    item.title=item.taskName
                    return item
                })
                
                this.tabList[0].data=newData
            }).catch((err)=>{
                this.$message.error("请求出错");
                throw(err)
            })
        },

        getNoticeData(infoType){
            var _this=this
            var submitData={
                current:1,
                size:999999,
                startTime:this.startTime,
                endTime:this.endTime,
                infoType:infoType,
            };
            this.$http.getNoticeList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){return}
                
                this.tabList.forEach((item,index)=>{
                    if(item.id==infoType){
                        _this.$set( _this.tabList[index],'data',data.records)
                    }
                })
            }).catch((err)=>{
                this.$message.error("网络出错");
                throw("getNoticeList接口报错：",err)
            })
        },



        //查看消息
        viewMsg(ev){
            if(this.curTab==='000'){
                this.$router.push("/taskManage/task-list")
            }else{
                this.$router.push("/noticeManage/notice-list")
            }
            this.showMsgList=false
        },

        setRead(){
            var _this=this
            var curTabObj=this.tabList.filter((item)=>{
                    if(item.id===this.curTab){
                        return true
                    }
            })
            var ids=curTabObj[0].data && curTabObj[0].data.map((item)=>{
                return item.id
            })
            
            if(!ids){return}
            var submitData={
                ids:ids.toString()
            }
            
            this.$http.setHasRead(submitData)
            .then((res)=>{  
                 _this.tabList.forEach((tab,tabindex)=>{
                     if(tab.id===_this.curTab){
                         tab.data.forEach((item,index)=>{
                             _this.$set( _this.tabList[tabindex].data[index],'readStatus','0')
                         })
                     }
                 })
            }).catch((err)=>{
                throw(err)
            })
        },

        getTabs(){
            var submitData={type:'info_type'}
            var _this=this
            this.$http.getDictByType(submitData)
            .then((res)=>{
                var data=res.data.data
                if(!data){return}
                //_this.tabList.concat(data)
                data.forEach(item => {
                    _this.tabList.push(item)
                });
                _this.getTab=true
            }).catch((err)=>{
                throw(err)
            })
        },

        initDate(){
            var dateNow=new Date()
            var dateBefore=new Date(Date.now()-2*7*24*60*60*1000)//两周前
            var nowyear=dateNow.getFullYear()
            var nowmonth=dateNow.getMonth()+1
            var nowday=dateNow.getDate()
            var beforeyear=dateBefore.getFullYear()
            var beforemonth=dateBefore.getMonth()+1
            var beforeday=dateBefore.getDate()
            if(nowmonth<10){
                nowmonth="0"+nowmonth
            }
            if(beforemonth<10){
                beforemonth="0"+beforemonth
            }
            if(nowday<10){
                nowday="0"+nowday
            }
            if(beforeday<10){
                beforeday="0"+beforeday
            }
            this.startTime=`${beforeyear}-${beforemonth}-${beforeday}`
            this.endTime=`${nowyear}-${nowmonth}-${nowday}`
        
        },


    },
}
</script>
<style lang="scss" scoped>
#nav-msg{
    cursor: default;
    /deep/ .el-dialog{
        height: 70%;
        width: 40%;
        display: flex;
        flex-direction: column;
        .el-dialog__header{
            .btn-read{
                float: right;
                margin-right: 30px;
                font-size: 14px;
                cursor: pointer;
                .iconfont{
                    margin-right: 10px;
                }
                &.disabled{
                    cursor: not-allowed;
                    color: rgba(255,255,255,0.5)
                }
            }
        }
        .el-dialog__body{
            flex:1;
            padding-top: 0;
            overflow: hidden;
        }
    }

    /deep/ .el-tabs{
        height: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__header{
            .el-tabs__active-bar{
                background-color:#fff;
            }
            .el-tabs__nav-wrap::after{
                background-color:#2f5484;
            }
        }
        .el-tabs__content{
            flex:1;
            overflow: auto;
        }
    }

    .msg-item{
        height: 30px;
        line-height: 30px;
        padding:0px 20px;
        &:hover{
            background-color: rgba(49,85,132,0.55);
        }
        .createDate{
            float:right;
        }
        .iconfont{
            color: #fb6a53;
        }
        .title{
            display: inline-block;
            vertical-align: middle;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 60%;
        }
    }
}
</style>


